<template>
  <div>
    <el-row type="flex">
      <el-col :span="4" :style="{ height: heightTree }">
        <el-tree
          style="margin-left:10px;margin-top:20px;"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>
      <el-col
        class="formWarp"
        :span="20"
        style="margin-left: 10px"
        :style="{ height: heightTree }"
      >
      <h2 style="text-align:center;font-size:30px;">大 组 工 网 网 站、电 子 邮 件 系 统 信 息 备 案 表</h2>
        <div class="infohead">
          <p>填报单位:(盖章)<input readonly v-model="fillingOrg" class="inputVal"/></p>
          <p>填表人:<input readonly v-model="fillingPerson" class="inputVal"/></p>
          <p>联系方式:<input readonly v-model="fillingTel" class="inputVal"/></p>
        </div>
        <div :style="{ height: heightTable }" style="overflow-y: scroll;margin-top:10px;">
          <table border="1" class="myTable">
            <thead>
              <tr>
                <td colspan="4" style="text-align: left; font-size: 18px">
                  一、大组工网网站
                </td>
              </tr>
              <tr>
                <td style="width: 313px">市级党委组织部网站名称</td>
                <td colspan="3">
                  <el-input readonly v-model="netName" />
                </td>
              </tr>
              <tr>
                <td>市级党委组织部网站域名/IP</td>
                <td colspan="3">
                  <el-input readonly v-model="netIp" />
                </td>
              </tr>
              <tr>
                <td>市级党委组织部网站部署情况</td>
                <td colspan="3">
                  <el-input readonly v-model="netArrange" />
                </td>
              </tr>
              <tr>
                <td>网络技术路线</td>
                <td>
                  <el-input readonly v-model="netWay" />
                </td>
                <td>管理制度</td>
                <td style="text-align: left">
                  <el-checkbox-group onclick="return false" v-model="isManage">
                    <el-checkbox label="1">有</el-checkbox>
                    <el-checkbox label="0">暂无</el-checkbox>
                  </el-checkbox-group>
                  <el-link type="primary" @click="hanldeClickOne" v-if="wzFlag">管理制度网站附件</el-link>
                </td>
              </tr>
              <tr>
                <td>网站管理责任科(处)室</td>
                <td colspan="3">
                  <el-input readonly v-model="netOrg" />
                </td>
              </tr>
              <tr>
                <td>管理人员</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="classyang">
                      姓名：<el-input readonly
                        v-model="personName"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      单位及职务：<el-input readonly
                        v-model="jobPost"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      办公电话：<el-input readonly
                        v-model="telPhone"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      手机号码：<el-input readonly
                        v-model="phone"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td>访问中组部网站/山东组织工作网情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="classyang">
                      是否使用国产化计算机访问：
                      <el-checkbox-group onclick="return false" v-model="isLoacalizationPc">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      能否正常访问：
                      <el-checkbox-group onclick="return false" v-model="isOk">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      问题：<el-input readonly v-model="reasonPc" style="width: 400px" />
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td>国产化情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="classyang">
                      是否国产化：
                      <el-checkbox-group onclick="return false" v-model="isLoacalization">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      能否正常访问：
                      <el-checkbox-group onclick="return false" v-model="isUsedOk">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      问题：<el-input readonly
                        v-model="reasonLoac"
                        style="width: 400px"
                      />
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="4" style="text-align: left; font-size: 18px">
                  二、电子邮件系统
                </td>
              </tr>
              <tr>
                <td>市级党委组织部邮件系统域名/IP</td>
                <td colspan="3">
                  <el-input readonly v-model="emailIp" />
                </td>
              </tr>
              <tr>
                <td>邮件系统名称/型号</td>
                <td><el-input readonly v-model="emailName" /></td>
                <td>管理制度</td>
                <td style="text-align:left">
                  <el-checkbox-group onclick="return false"
                    v-model="emailIsManage"
                    @change="handlEmaileManageChange"
                  >
                    <el-checkbox label="1">有</el-checkbox>
                    <el-checkbox label="0">暂无</el-checkbox>
                  </el-checkbox-group>
                  <el-link type="primary" @click="hanldeClickTwo" v-if="emailFlag">管理制度邮件附件</el-link>
                </td>
              </tr>
              <tr>
                <td>邮件管理责任处室</td>
                <td><el-input readonly v-model="emailOrg" /></td>
                <td>联系人及电话</td>
                <td><el-input readonly v-model="personPhone" /></td>
              </tr>
              <tr>
                <td>开设邮箱数</td>
                <td><el-input readonly v-model="emailNum" /></td>
                <td>邮箱分配范围</td>
                <td>
                  <p style="display: flex; align-items: center">
                    市级：
                    <el-checkbox-group onclick="return false" v-model="emailCity">
                      <el-checkbox label="0">机构</el-checkbox>
                      <el-checkbox label="1">全员</el-checkbox>
                    </el-checkbox-group>
                  </p>
                  <p
                    style="display: flex; align-items: center; margin-top: 5px"
                  >
                    县级：
                    <el-checkbox-group onclick="return false" v-model="emailContry">
                      <el-checkbox label="0">机构</el-checkbox>
                      <el-checkbox label="1">全员</el-checkbox>
                    </el-checkbox-group>
                  </p>
                </td>
              </tr>
              <tr>
                <td>访问中组部大组工网邮件系统/省委组织部组工网邮件系统情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="classyang">
                      是否使用国产化计算机访问：
                      <el-checkbox-group onclick="return false" v-model="emailLocationPc">
                      <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                    </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      能否正常访问：
                      <el-checkbox-group onclick="return false" v-model="emailIsOk">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                    </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      问题：<el-input readonly
                        v-model="emailReason"
                        style="width: 400px"
                      />
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="4" style="text-align: left; font-size: 18px">
                  三、问题建议
                </td>
              </tr>
              <tr style="height: 80px">
                <td colspan="4" style="text-align: left">
                  <el-input readonly type="textarea" :rows="4" v-model="remark" />
                </td>
              </tr>
            </thead>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
  import {getInfoList} from "@/api/datacentersg/personnelPut/personnelPut.js"
  import store from "@/store";
  import webapp from "@/config/webapp";
  class Photo {
    constructor(name, url) {
      this.name = name;
      this.url = url;
    }
  }
export default {
  data() {
    return {
      fillingOrg:"",
      fillingPerson:"",
      fillingTel:"",
      netName:"",
      netIp:"",
      netArrange:"",
      netWay:"",
      isManage:[],
      netOrg:"",
      personName:"",
      jobPost:"",
      telPhone:"",
      phone:"",
      isLoacalizationPc:[],
      isOk:[],
      reasonPc:"",
      isLoacalization:[],
      isUsedOk:[],
      reasonLoac:"",
      emailIp:"",
      emailName:"",
      emailIsManage:[],
      emailOrg:'',
      personPhone:"",
      emailNum:"",
      emailCity:[],
      emailContry:[],
      emailLocationPc:[],
      emailIsOk:[],
      emailReason:"",
      remark:"",
      heightTree: window.innerHeight - 150 + "px",
      heightTable: window.innerHeight - 280 + "px",
      uploadUrl:webapp.uploadUrl,
      fileMultiple:false,
      fileUrl:"",
      emailFile:"",
      fileEmailMultiple:false,
      fileManageList:[],
      fileEmailList:[],
      heightTree: window.innerHeight - 150 + "px",
      heightTable: window.innerHeight - 240 + "px",
      defaultProps: {
        children: "children",
        label: "label",
      },
      data: [
        {
          label: "山东省",
          children: [
            {
              label: "济南市",
            },
            {
              label: "青岛市",
            },
            {
              label: "淄博市",
            },
            {
              label: "枣庄市",
            },
            {
              label: "东营市",
            },
            {
              label: "烟台市",
            },
            {
              label: "潍坊市",
            },
            {
              label: "济宁市",
            },
            {
              label: "泰安市",
            },
            {
              label: "威海市",
            },
            {
              label: "日照市",
            },
            {
              label: "临沂市",
            },
            {
              label: "德州市",
            },
            {
              label: "聊城市",
            },
            {
              label: "滨州市",
            },
            {
              label: "菏泽市",
            },
          ],
        },
      ],
      dataLabel:"",
      emailFlag:false,
      wzFlag:false,
    };
  },
  created() {
    this.$watch('dataLabel', (newVal, oldVal) => {
      if (newVal) {
        this.getList();
      } else {
        this.$message({
          message: "请先选择机构",
          type: "warning",
        });
      }
    });
    this.$watch('fileUrl', (newVal, oldVal) => {
      if (newVal) {
        this.wzFlag = true
      } else {
        this.wzFlag = false
      }
    });
    this.$watch('emailFile', (newVal, oldVal) => {
      if (newVal) {
        this.emailFlag = true
      } else {
        this.emailFlag = false
      }
    });
  },
  methods: {
    getList(){
      this.clear();
        const params = {
           userId:store.getters.user_id.toString(),
           token:store.getters.token.toString(),
           data:{
              organization:this.dataLabel,
           }
        }
        getInfoList(params).then((result) =>{
          if(result.result){
                this.id = result.resultdata[0].id;
                this.fillingOrg=result.resultdata[0].fillingOrg
                this.fillingPerson=result.resultdata[0].fillingPerson
                this.fillingTel=result.resultdata[0].fillingTel
                this.netName = result.resultdata[0].netName;
                this.netIp = result.resultdata[0].netIp;
                this.netArrange = result.resultdata[0].netArrange;
                this.netWay = result.resultdata[0].netWay;
                this.isManage = [];
                this.isManage.push(result.resultdata[0].isManage.toString());
                this.netOrg = result.resultdata[0].netOrg;
                this.personName = result.resultdata[0].personName;
                this.jobPost = result.resultdata[0].jobPost;
                this.telPhone = result.resultdata[0].telPhone;
                this.phone = result.resultdata[0].phone;
                this.isLoacalizationPc = [];
                this.isLoacalizationPc.push(result.resultdata[0].isLoacalizationPc.toString());
                this.isOk = [];
                this.isOk.push(result.resultdata[0].isOk.toString());
                this.reasonPc = result.resultdata[0].reasonPc;
                this.isLoacalization = [];
                this.isLoacalization.push(result.resultdata[0].isLoacalization.toString());
                this.isUsedOk = [];
                this.isUsedOk.push(result.resultdata[0].isUsedOk.toString());
                this.reasonLoac = result.resultdata[0].reasonLoac;
                this.emailIp = result.resultdata[0].emailIp;
                this.emailName = result.resultdata[0].emailName;
                this.emailIsManage = [];
                this.emailIsManage.push(result.resultdata[0].emailIsManage.toString());
                this.emailOrg = result.resultdata[0].emailOrg;
                this.personPhone = result.resultdata[0].personPhone;
                this.emailNum = result.resultdata[0].emailNum;
                this.emailCity = [];
                this.emailCity.push(result.resultdata[0].emailCity.toString());
                this.emailContry=[];
                this.emailContry.push(result.resultdata[0].emailContry.toString());
                this.emailLocationPc = [];
                this.emailLocationPc.push(result.resultdata[0].emailLocationPc.toString());
                this.emailIsOk = [];
                this.emailIsOk.push(result.resultdata[0].emailIsOk.toString());
                this.emailReason = result.resultdata[0].emailReason;
                this.remark = result.resultdata[0].remark;
                this.fileUrl = result.resultdata[0].fileUrl;
                this.emailFile = result.resultdata[0].emailFile;
                const photoList = [];
                if (result.resultdata[0].fileUrl) {
                    photoList.push(new Photo("管理制度网站附件", result.resultdata[0].fileUrl));
                } else {
                    this.fileManageList = [];
                }
                this.fileManageList = photoList;

                const photoListEmail = [];
                if (result.resultdata[0].emailFile) {
                    photoListEmail.push(new Photo("管理制度邮件附件", result.resultdata[0].emailFile));
                } else {
                    this.fileEmailList = [];
                }
                this.fileEmailList = photoListEmail;
          }
        })
    },
    handleNodeClick(data) {
      this.dataLabel = data.label;
    },
    hanldeClickOne(){
      if(this.fileUrl !==""){
        window.open(this.fileUrl);
      }
    },
    hanldeClickTwo(){
      if(this.fileUrl !==""){
        window.open(this.emailFile);
      }
    },
    handleCheckClassType(value) {
      console.log(value, "value");
    },
    handlePreviewEmail(){},
    uploadSuccessEmail(){},
    handlePreview(){},
    before_uploadEmail(){},
    before_upload(){},
    uploadSuccess(){},
    handlEmaileManageChange() {},
    clear(){
      this.fillingOrg=""
      this.fillingPerson=""
      this.fillingTel=""
      this.netName ="";
      this.netIp ="";
      this.netArrange ="";
      this.netWay ="";
      this.isManage = [];
      this.netOrg ="";
      this.personName ="";
      this.jobPost ="";
      this.telPhone ="";
      this.phone ="";
      this.isLoacalizationPc = [];
      this.isOk = [];
      this.reasonPc ="";
      this.isLoacalization = [];
      this.isUsedOk = [];
      this.reasonLoac ="";
      this.emailIp ='';
      this.emailName ='';
      this.emailIsManage = [];
      this.emailOrg ="";
      this.personPhone ="";
      this.emailNum ='';
      this.emailCity = [];
      this.emailContry=[];
      this.emailLocationPc = [];
      this.emailIsOk = [];
      this.emailReason ="";
      this.remark ="";
      this.fileUrl ="";
      this.emailFile ="";
      this.fileManageList = [];
      this.fileEmailList = [];
    },
  },
};
</script>
  
  <style scoped>
.el-col {
  border-radius: 4px;
  background: #fff;
}
.formWarp {
  box-shadow: 5px 5px 10px #eee;
  padding: 5px;
}
.infohead{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.infohead p{
  font-size:18px;
}
.inputVal{
  border: none;
  border-bottom:1px solid #000;
  font-size:16px;
  font-weight: lighter;
}
.myTable {
  width: 100%;
  margin-bottom: 10px;
  border-spacing: 0;
  border: 1px solid #dcdfe6;
}

.myTable tbody {
  width: 100%;
}

.myTable td {
  word-wrap: break-word;
  font-size: 18px;
  padding: 5px 10px;
  text-align: center;
}
.classyang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 5px;
}
>>>.el-input--small .el-input__inner{
  border: none;
  font-size:16px;
}
>>>textarea.el-textarea__inner{
  border: none;
  font-size:16px;
}
>>>.el-tree-node__label{
  font-size:16px;
}
>>>.el-checkbox__label{
  font-size:16px;
}
</style>